<template>
	<view class="musichead-everyone">
		<view v-if="isShowback" class="musichead-btn">
			<text @click="goAnterior" class="iconfont icon-fanhui" style="margin-right: 15px;"></text>
			<text @click="goHome" class="iconfont icon-shouye-zhihui"></text>
		</view>
		<view class="musichead-text">
			{{name}}
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	export default {
		name: "musichead",
		data() {
			return {

			}
		},
		//槽用于接受传递的参数
		props: {
			name: {
				type: String, // 指定类型
				required: true // 是否必填
			},
			isShowback: {
				type: Boolean, // 布尔类型
				default: false // 默认值
			},
		},
		methods:{
			goHome(){
				// uni.switchTab 专门用于跳转到 TabBar 页面（会重置页面栈，直接切换到 TabBar 页面）
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goAnterior(){
				//uni.navigateBack返回上一页
				uni.navigateBack({
					delta:1,
					animationDuration:300
				});
			}
		},

	}
</script>

<style>
	.musichead-everyone {
		width: 100v;
		height: 50px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); // 使用变量 */
		/* box-shadow: 0 2px 10px rgba(0, 255, 255, 0.1); //卡片外框颜色 */
		/* background: linear-gradient(90deg, #ffbcfc, var(--primary-color)); */
		/* box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); //鼠标放上的阴影 */
		/* background-color: rgba(108, 255, 238, 0.7); */
		/* -webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px); */

	}

	.musichead-btn {
		position: absolute;
		width: 70px;
		height: 30px;
		left: 15px;
		border-radius: 20px;
		/* background-color: antiquewhite; */
		background-color: rgba(255, 255, 255, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.musichead-text {
		
	}
</style>